/*
 * 首页动画标题组件 - Animated Home Title Component
 * 提供带有描边动画效果的标题文字展示
 */

import React, { useEffect, useRef, useState } from 'react';
import * as echarts from 'echarts/core';
import { GraphicComponent } from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';
import styles from './index.less';

interface iiiuHomeTitleProps {
  text?: string;
  fontSize?: number;
  duration?: number;
}

const iiiuHomeTitle: React.FC<iiiuHomeTitleProps> = ({
  text = 'iiiuHomePic',
  fontSize = 80,
  duration = 5000
}) => {
  const chartRef = useRef<HTMLDivElement>(null);
  const chartInstance = useRef<echarts.ECharts | null>(null);
  const [animationPhase, setAnimationPhase] = useState<'appear' | 'disappear' | 'hidden'>('appear');

  useEffect(() => {
    // 注册ECharts组件
    echarts.use([GraphicComponent, CanvasRenderer]);

    if (chartRef.current) {
      // 初始化图表
      chartInstance.current = echarts.init(chartRef.current);
    }

    // 清理函数
    return () => {
      if (chartInstance.current) {
        chartInstance.current.dispose();
      }
    };
  }, []);

  useEffect(() => {
    if (!chartInstance.current) return;

    let option;

    if (animationPhase === 'appear') {
      // 出现动画 - 笔画效果
      // 注释：出现动画的字体大小在这里设置 - fontSize: fontSize (默认80)
      // 注释：出现动画的字体粗细在这里设置 - fontWeight: 'bold'
      option = {
        graphic: {
          elements: [
            {
              type: 'text',
              left: 'center',
              top: 'center',
              style: {
                text: text,
                fontSize: fontSize, // 出现动画字体大小设置位置
                fontWeight: 'bold', // 统一字体粗细为bold
                // lineDash: [0, 200],
                lineDash: [0, 280],
                lineDashOffset: 0,
                fill: 'transparent',
                stroke: '#FFF',
                lineWidth: 1,
              },
              keyframeAnimation: {
                duration: duration,
                keyframes: [
                  {
                    percent: 0.7,
                    style: {
                      fill: 'transparent',
                      lineDashOffset: 200,
                      lineDash: [200, 0],
                    },
                  },
                  {
                    percent: 0.8,
                    style: {
                      fill: 'transparent',
                    },
                  },
                  {
                    percent: 1,
                    style: {
                      fill: '#fff',
                    },
                  },
                ],
              },
            },
          ],
        },
      };

      // 10秒后开始消失动画
      setTimeout(() => {
        setAnimationPhase('disappear');
      }, 10000);
    } else if (animationPhase === 'disappear') {
      // 消失动画（反向）
      // 注释：消失动画的字体大小在这里设置 - fontSize: fontSize (默认80)
      // 注释：消失动画的字体粗细在这里设置 - fontWeight: 'bold'
      option = {
        graphic: {
          elements: [
            {
              type: 'text',
              left: 'center',
              top: 'center',
              style: {
                text: text,
                fontSize: fontSize, // 消失动画字体大小设置位置，与出现动画保持一致
                fontWeight: 'bold', // 消失动画字体粗细设置位置，与出现动画保持一致
                fill: '#fff',
                stroke: '#FFF',
                lineWidth: 3,
              },
              keyframeAnimation: {
                duration: 3000,
                keyframes: [
                  {
                    percent: 0,
                    style: {
                      fill: '#fff',
                      stroke: '#FFF',
                      lineWidth: 1,
                    },
                  },
                  {
                    percent: 0.4,
                    style: {
                      fill: 'transparent',
                      stroke: '#FFF',
                      lineWidth: 3,
                    },
                  },
                  {
                    percent: 1,
                    style: {
                      fill: 'transparent',
                      stroke: 'transparent',
                      lineWidth: 0,
                    },
                  },
                ],
              },
            },
          ],
        },
      };

      // 3秒后隐藏，再3秒后重新开始
      setTimeout(() => {
        setAnimationPhase('hidden');
        setTimeout(() => {
          setAnimationPhase('appear');
        }, 3000);
      }, 1500);
    } else {
      // 隐藏状态
      option = {
        graphic: {
          elements: [],
        },
      };
    }

    chartInstance.current.setOption(option);
  }, [animationPhase, text, fontSize, duration]);

  return <div ref={chartRef} className={styles.iiiuHomeTitle} />;
};

export default iiiuHomeTitle;